<template>
    <div>
        <Card dis-hover >
            <h3>
                {{taskName}}
            </h3>
            <ButtonGroup slot="extra">
                <Button @click="approvalInfo" type="warning" style="background: #EF5350;" :loading="buttonloading" v-if="!taskInfo.viewFlag">
                    <Icon type="ios-bookmark" />
                    审批
                </Button>
                <Button @click="returnTo">
                    返回
                    <Icon type="ios-arrow-forward" />
                </Button>
            </ButtonGroup>
        </Card>
        <Row>
            <i-col span="24">
                <Card dis-hover style="margin: 10px;">
                    <Spin fix v-if="spinShow">
                        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                        <div>Loading</div>
                    </Spin>
                    <div :style="{height: bodyHeight + 'px', overflowY: 'auto'}">
                        <Form ref="formCustom" :model="infoData" :rules="ruleCustom" label-position="top">
                            <Row :gutter="16">
                                <i-col span="8">
                                    <FormItem label="企业名称：" >
                                        <Input v-model="infoData.contractorName" readonly/>
                                    </FormItem>
                                </i-col>
                                <i-col span="8">
                                    <FormItem label="企业性质：">
                                        <Input v-model="infoData.propertyName" readonly/>

                                    </FormItem>
                                </i-col>
                                <i-col span="8">
                                    <FormItem label="法定代表人：">
                                        <Input v-model="infoData.legalPerson" readonly/>
                                    </FormItem>
                                </i-col>
                            </Row>
                            <Row :gutter="16">
                                <i-col span="8">
                                    <FormItem label="注册资本：">
                                        <Input v-model="infoData.capital" readonly/>
                                    </FormItem>
                                </i-col>
                                <i-col span="8">
                                    <FormItem label="统一社会信用代码	：">
                                        <Input v-model="infoData.unifyCode" readonly/>
                                    </FormItem>
                                </i-col>
                            </Row>
                            <Row :gutter="16">
                                <i-col span="8">
                                    <FormItem label="禁入开始时间：" prop="banStart">
                                        <DatePicker type="date" v-model="infoData.banStart" placeholder="请选择禁入开始时间" style="width: 100%" :disabled="!ifEdit"></DatePicker>
                                    </FormItem>
                                </i-col>
                                <i-col span="8">
                                    <FormItem label="禁入结束时间：" prop="banEnd">
                                        <DatePicker type="date" v-model="infoData.banEnd" placeholder="请选择禁入结束时间" style="width: 100%" :disabled="!ifEdit"></DatePicker>
                                    </FormItem>
                                </i-col>
                                <i-col span="8">
                                    <FormItem label="准入类别：" prop="admittanceOrg">
                                        <Input v-model="infoData.admittanceOrg" :readonly="!ifEdit"/>
                                    </FormItem>
                                </i-col>
                            </Row>
                            <Row :gutter="16">
                                <i-col span="24">
                                    <FormItem label="通知文件：" prop="informFile">
                                        <Input v-model="infoData.informFile" type="textarea" placeholder="请填写通知文件" :readonly="!ifEdit"/>
                                    </FormItem>
                                </i-col>
                            </Row>
                            <Row :gutter="16">
                                <i-col span="24" >
                                    <FormItem label="原因及处理结果：" prop="reasonResult">
                                        <Input v-model="infoData.reasonResult" type="textarea" placeholder="请填写原因及处理结果" :readonly="!ifEdit"/>
                                    </FormItem>
                                </i-col>
                            </Row>
                            <Row :gutter="16">
                                <i-col span="24">
                                    <FormItem label="备注：">
                                        <Input v-model="infoData.notes" type="textarea" placeholder="请填写备注" :readonly="!ifEdit"/>
                                    </FormItem>
                                </i-col>
                            </Row>
                        </Form>
                        <Divider orientation="left">操作信息</Divider>

                        <Form ref="formCustom2" :model="formData" :rules="ruleCustom2" label-position="top">
                            <Row :gutter="16">
                                <i-col span="8" v-if="ifRoute">
                                    <FormItem label="审批意见：" prop="route">
                                        <Select filterable v-model="formData.route" @on-change="changeRoute">
                                            <Option v-for="item in routeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                                        </Select>
                                    </FormItem>
                                </i-col>
                            </Row>
                            <Row :gutter="16">
                                <i-col span="8">
                                    <FormItem label="操作人：" prop="userName">
                                        <Input v-model="formData.userName" readonly/>
                                    </FormItem>
                                </i-col>
                                <i-col span="8">
                                    <FormItem label="操作时间：">
                                        <Input v-model="formData.createDateStr" readonly/>
                                    </FormItem>
                                </i-col>
                            </Row>
                            <Row>
                                <i-col span="24">
                                    <FormItem label="说明：" prop="opinion">
                                        <Input type="textarea" v-model="formData.opinion"/>
                                    </FormItem>
                                </i-col>
                            </Row>
                        </Form>
                    </div>
                </Card>
            </i-col>
        </Row>
    </div>
</template>

<script>

import {Api} from '../../../api';
import {sessionStorage} from '@/common/cacheUtils.js';

export default {
        name: "interestedPartiesBlackForm",
        data(){
            return {
                taskName: '',
                buttonloading: false,
                taskInfo:{},
                bodyHeight: '',
                spinShow: true,
                formData: {},
                ruleCustom: {
                    admittanceOrg: [{
                        message: '  ',
                        required: true,
                        trigger: 'change, blue'
                    }],
                    informFile: [{
                        message: '  ',
                        required: true,
                        trigger: 'change, blue'
                    }],
                    contractorName: [{
                        message: '  ',
                        required: true,
                        trigger: 'change, blue'
                    }],
                    banStart: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change, blue'
                    }],
                    banEnd: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change, blue'
                    }],
                    reasonResult: [{
                        message: '  ',
                        required: true,
                        trigger: 'change, blue'
                    }],
                },
                ifRoute: false,
                ifEdit: false,
                userInfo: sessionStorage('userId').getObject('userId'),
                infoData: {},
                ruleCustom2: {
                    route: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change'
                        }
                    ],
                },
                routeList: [
                    {
                        id: '1',
                      name: '同意'
                    },
                    {
                        id: '2',
                      name: '不同意'
                    }
                ],
            }
        },
        mounted(){
            this.bodyHeight = window.innerHeight - 175;
            this.taskName = this.$route.query.taskName;
            this.taskInfo = this.$route.query;
            this.query();
        },
        methods: {
            returnTo(){
                if(this.taskInfo.close == true){
                    window.close();
                }
                else
                    this.$router.go(-1);
            },
            query(){
                this.$http.get(Api.interestedPartiesBlackById + this.taskInfo.workId ).then(function(response) {
                    if(response.data.status == 200) {
                        this.infoData = response.data.data;
                        if(this.taskInfo.status == 'done' || this.taskInfo.status == 'self')
                            this.spinShow = false;
                        else
                            this.queryFormList();
                    }
                });

                this.queryFormList()
            },
            queryFormList(){
                this.$http.get(Api.getProcinstForm + '/'+ this.taskInfo.taskId).then(function(response) {
                    if(response.data.formList.length!=0){
                        response.data.formList.map((i)=>{
                            if(i.id == 'route') this.ifRoute = true;
                            else if(i.id == 'edit') {
                                this.ifEdit = true;
                            }
                        })
                    }
                    this.spinShow = false;
                });
                 this.formData = {
                    userName: this.userInfo.userName,
                    taskId: this.taskInfo.taskId,
                    createUserId: this.userInfo.userId,
                    createDateStr: this.formatDate(new Date(), 'yyyy-MM-dd'),
                    procinstId: this.taskInfo.procinstId,
                    route: 1
                }
            },
            approvalInfo(){
                if(this.ifEdit == true){
                    let v = this.saveInfo();
                    if(!v){
                        this.buttonloading = false;
                        return;
                    }
                }
                this.$refs['formCustom2'].validate((valid) => {
                    if(valid){
                        this.buttonloading = true;
                        this.$http.get(Api.taskComplete, {
                            params: this.formData
                        }).then(function(response){
                            if(response.data.status == 200){
                                this.$Message.success({content: '保存成功', duration: 4});
                                // this.screenMessage();
                                this.returnTo();
                            }else{
                                this.$Message.error({ content: '保存失败', duration: 4});
                            }
                            this.buttonloading = false;
                        });
                    }else{
                        this.$Message.error({ content: '请填写完整！', duration: 4});
                    }
                });
            },
            saveInfo(){
                let v = true;
                this.$refs['formCustom'].validate((valid) => {
                    if(valid){
                        this.$http.post(Api.interestedPartiesBlackUpdate, this.infoData).then((response) => {
                            if(response.data.status != 200){
                                this.$Message.error({ content: response.data.msg, duration: 4 });
                            }
                        })
                    }else{
                        this.$Message.error({ content: '请填写完整！', duration: 4});
                        v = false;
                    }
                });
                return v;
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
        }
    }
</script>

<style scoped>
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    .demo-upload-list{
        display: inline-block;
        width: 168px;
        height: 212px;
        text-align: center;
        line-height: 212px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-top:10px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
